<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
	<head>
	<link href="<%=basePath %>res/yyf/css/reset.css" rel="stylesheet" media="screen" type="text/css" />
	<link href="<%=basePath %>res/yyf/css/supersized.css" rel="stylesheet" media="screen" type="text/css" />
	<link href="<%=basePath %>res/yyf/css/style.css" rel="stylesheet" media="screen" type="text/css" />
	
	<script src="<%=basePath %>/res/yyf/js/jquery-1.8.2.min.js"></script>
	<script src="<%=basePath %>/res/yyf/js/supersized.3.2.7.min.js"></script>
	<script src="<%=basePath %>/res/yyf/js/supersized-init.js"></script>
	<script src="<%=basePath %>/res/yyf/js/scripts.js"></script>
	<script src="<%=basePath %>/res/yyf/js/jquery-1.8.2.min.js"></script>
	<style>
		ul li{
			list-style:none;
		}
	</style>
	<base href="<%=basePath %>" />
	<meta charset="UTF-8">
	<title>注册</title>
	<script>
	
		//刚加载页面的时候焦点移到用户名文本框内
		function myFocus() {
			document.getElementById("userName").focus();
		}
		
		//焦点移走密码框
		function blurPwd() {
			var password = document.getElementById("userPwd").value;
			//当密码强度弱的时候则弱为红色
			//密码大于0小于等于4个数为弱
				if (password.length > 0 && password.length <= 4) {
					ruo.style.backgroundColor = "red";
					zhong.style.backgroundColor = "#CCC";
					qiang.style.backgroundColor = "#CCC";
				}//密码大于4小于等于8个数为中等
				else if (password.length > 4 && password.length <= 8) {
					//alert(222);
					ruo.style.backgroundColor = "#CCC";
					zhong.style.backgroundColor = "red";
					qiang.style.backgroundColor = "#CCC";
				}//密码大于8小于等于12个数为强
				else if (password.length > 8) {
					ruo.style.backgroundColor = "#CCC";
					zhong.style.backgroundColor = "#CCC";
					qiang.style.backgroundColor = "red";
				}
		}
		
	</script>
	</head>
	<body style="background-color:#fff;">
		<div class="page-container" onload="myFocus();">
				
				<!-- 表单方法隐藏 -->
	            <form action="<%=basePath %>loginandregist/registSubmit" method="post">
	            <img class="content" src="pages/imagesYYF/饿了么.png" width="270px" height="90px">
					<table>
						<div class="content">
							<ul>
								<!-- 输入框 -->
								<li><input id="userName" name="user_name" type="text" size="50" maxlength="8"  placeholder="用户名" onblur="Name();" required="请输入用户名" />
									<span id="checkName"></span></li>
		
								<li><input id="userPwd" name="user_pwd" type="password" maxlength="8" size="20"  placeholder="密码" onblur="Pwd();" required="请输入密码"  />
									<span id="checkPwd"></span></li>
									
								<li><input id="userPhone" name="user_phone" onblur="phone()" type="text" size="50"   placeholder="手机号" onblur="Phone();" required="请输入电话" />
									<span id="checkPhone"></span></li>
		
								<li><input id="userCard" name="user_card" onblur="card()" type="text"  size="20"  placeholder="身份证" onblur="Card();" required="请输入身份证"  />
									<span id="checkCard"></span></li>
									
								<li style=" padding-left:150px;position:relative;left:25px;top:10px;"><span class="pwdstrength" id="ruo">弱</span>
									<span class="pwdstrength" id="zhong">中</span>
									<span class="pwdstrength" id="qiang">强</span> <br /></li>
							</ul>
						</div>
						
						<!-- 鼠标点击跳转 -->
						<tr>
							<td><a class="buttonCss" href="<%=basePath %>/pages/yyf/login.jsp" id="regist" style="width:100px;position:relative;left:21px;top:20px;">登录</a>
							<button class="buttonCss" id="go" type="submit" style="width:100px;position:relative;left:81px;top:20px;">注册~</button></td>
						</tr>
						<tr>
							<td id="opop" colspan="2" style="color: red;position: relative;top:-50px;">${info }</td>
						</tr>
					</table>
	            </form>
	            <div class="connect" style="position:relative;left:-15px;">
					
	            </div>
	        </div>
			<h2 style="color:orange">${mes}</h2>
	</body>
	
			
	<script src="<%=basePath %>res/yyf/js/jquery-1.8.2.min.js" type="text/javascript"></script>
	<script><!-- 脚本 -->
	
	function phone(){
	    var phone = document.getElementById('userPhone').value;
	    if(!(/^1[34578]\d{9}$/.test(phone))){
	       /* alert("手机号码有误，请重新填写"); */
	       $("#userPhone").attr("placeholder","手机号码格式不正确");
	       document.getElementById('userPhone').value="";
	       return false;
	    }
	}
	
	function card(){ 
		// 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X 
		var card = document.getElementById('userCard').value;
		if(!(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(card))){ 
			$("#userCard").attr("placeholder","身份证格式不正确");
		    document.getElementById('userCard').value="";
			return false; 
		} 
	}
	
	
	
	/* function Name(){
		
		var xm  = document.getElementById("userName");
		var td = document.getElementById("checkName");
		//昵称为空时提示红色字体
	if(xm.value.length>=3)	if(xm.value==""){
			
			td.innerHTML="<font color='red'>请输入用户名</font>";
			return false;
		}else{
			td.innerHTML="<font color='red'></font>";
		}
	}
	
	function Pwd(){
		
		var mm  = document.getElementById("userPwd");
		//密码为空时提示红色字体
		if(mm.value==""){
			var td = document.getElementById("checkPwd");
			td.innerHTML="<font color='red'>请输入密码</font>";
			return false;
		}
	}
	
	function Phone(){
		
		var dh  = document.getElementById("userPhone");
		//密码为空时提示红色字体
		if(dh.value==""){
			var td = document.getElementById("checkPhone");
			td.innerHTML="<font color='red'>请输入电话</font>";
			return false;
		}
	}
	
	
	function Card(){
	
	var sfz  = document.getElementById("userCard");
	//密码为空时提示红色字体
	if(sfz.value==""){
		var td = document.getElementById("checkCard");
		td.innerHTML="<font color='red'>请输入身份证</font>";
		return false;
	} 
}*/
	
	
	</script>

</html>
</body>
</html>